<template>
    <div>
      <hyl-form :formColumns="addColumns" :formColumnsRule="addColumnsRule" :customColumnsData="customColumnsData" v-on:getFormData="getFormData">
        <!-- 定制写法 -->
        <el-form-item slot="name3" prop="name3" slot-scope="data">
          <el-input type="text" size="small" v-model="customColumnsData.name3">
            <el-select v-model="customColumnsData.select" slot="prepend" placeholder="请选择" style="width: 130px">
              <el-option label="餐厅名" value="1"></el-option>
              <el-option label="订单号" value="2"></el-option>
              <el-option label="用户电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
      </hyl-form>
    </div>
</template>

<script>
import hylForm from '@/components/form'
export default {
  name: 'index',
  components: {
    hylForm
  },
  data () {
    return {
      input5: '',
      select: '',
      customColumnsData: {
        name3: '',
        select: ''
      },
      addColumns: [
        {
          prop: 'name',
          label: '名称',
          hidden: false,
          dataType: 'varchar'
        },
        {
          prop: 'name2',
          label: '名称2',
          hidden: false,
          dataType: 'varchar'
        },
        {
          prop: 'name3',
          label: '名称3',
          hidden: false,
          dataType: 'varchar'
        },
        {
          prop: 'type',
          label: '类型',
          hidden: false,
          dataType: 'select',
          options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }]
        },
        {
          prop: 'createDateTime',
          label: '创建时间',
          dataType: 'datePicker'
        },
        {
          prop: 'radio',
          label: '性别',
          dataType: 'radio',
          value: [
            {
              label: 0,
              showName: '男'
            },
            {
              label: 1,
              showName: '女'
            }
          ]
        },
        {
          prop: 'loves',
          label: '爱好',
          dataType: 'checkbox',
          value: [
            {
              label: '足球'
            },
            {
              label: '乒乓球'
            },
            {
              label: '游戏'
            }
          ]
        }
      ],
      addColumnsRule: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          {validator: this.validateName, trigger: 'blur'}
        ],
        name2: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          {validator: this.validateName, trigger: 'blur'}
        ],
        name3: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          {validator: this.validateName, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getFormData (formData = {}, type) {
      // /// 合并对象
      // Object.keys(this.formColumnsData).forEach(key => {
      //   formData[key] = this.formColumnsData[key]
      // })
      console.log(formData)
      console.log(type)
    },
    validateName (rule, value, callback) {
      // 只能存在中文与字母
      let pattern = /^[\u4e00-\u9fa5A-Za-z]{2,16}$/
      if (pattern.test(value)) {
        callback()
      } else {
        callback(new Error('请输入[2-16]字母中文!'))
      }
    }
  }
}
// http://tool.chinaz.com/regex/ 正则表达式测试地方
</script>

<style scoped>

</style>
